<template>
	<view class="battery-content" >
		<view class="battery-main" >
			<view class="battery">
			  <view class="battery-cap"></view> <!-- 电池盖 -->
			  <view class="battery-level" :style="{width: batteryLevel}"></view>
			</view>
		</view>
		<view class="batterys-label" style="">
		  <view class="" style="">
		    <view class="b-text" style="">
		      电池电量
		    </view>
		    <view class="b-value" style="">
		      0%
		    </view>
		  </view>
		  <view class="" style="">
		    <view class="b-text" style="">
		      预估里程
		    </view>
		    <view class="b-value" style="">
		      0KM
		    </view>
		  </view>
		</view>
		<view class="b-btn" style="">
			<view class="b-btn-item" v-for="i in 8" style="">
				<view class="" style="color: #cacaca;">
					<view class="">
						----
					</view>
					<view class="" style="font-size: 28rpx;">
						
						健康百分比
					</view>
				</view>
				<view class="">
					<i class="iconfont ph" style="font-size: 50rpx;color: gray;">&#x10132;</i>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				 batteryLevel: '50%', // 默认电池电量为 50%
			}
		},
		  onLoad() {
		  
		  },
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.battery-content{
		height: 100vh;overflow: scroll;
		box-sizing: border-box;background-color: #e8e4e8;
		.batterys-label{
			width: 100%; display: flex; justify-content: center; align-items: center;
			font-size: 27rpx;
			view{
				padding:0 40rpx;
				.b-text{
					color:#cacaca;
				}
				.b-value{
					font-size: 60rpx;font-weight: 1000;margin-top: 20rpx;
				}
			}
		}
		.b-btn{
			display: flex; flex-wrap:wrap;width: 100%;box-sizing: border-box;padding: 0 5%;margin-top: 100rpx;
			.b-btn-item{
				display: flex;justify-content: space-between;
				border-radius: 20rpx;border: 2rpx solid #dddddd;
				width: 45%;padding: 30rpx 20rpx;
				box-sizing: border-box;margin: 8px 2%;
				background-color: #fff;
				box-shadow: 0 0 15rpx rgba(207, 207, 207, 0.8)
			}
		}
		.battery-main{
			width: 100%;box-sizing: border-box;padding: 100rpx 0;
		}
	}
@keyframes glowing {
  0% {
    box-shadow: 0 0 15rpx rgba(62, 209, 254, 0.8), 0 0 30rpx rgba(62, 209, 254, 0.3);
  }
  50% {
    box-shadow: 0 0 30rpx rgba(62, 209, 254, 1), 0 0 60rpx rgba(62, 209, 254, 0.5);
  }
  100% {
    box-shadow: 0 0 15rpx rgba(62, 209, 254, 0.8), 0 0 30rpx rgba(62, 209, 254, 0.3);
  }
}

.battery {
	margin: 0 auto;
  width: 320rpx; /* 电池的高度，现在变为宽度 */
  height: 180rpx; /* 电池的宽度，现在变为高度 */
  border: 8rpx solid #3ed1fe; /* 电池的外框 */
  border-radius: 20rpx; /* 电池的圆角 */
  position: relative; /* 设置为相对定位，为电池盖提供定位基础 */
  background-color: #e7e7e7; /* 电池的背景色 */
  animation: glowing 1.5s infinite ease-in-out; /* 动画效果：每 1.5 秒循环一次 */
}

.battery-cap {
  position: absolute;
  top: 50%;
  right: -50rpx; /* 电池盖在右侧 */
  transform: translateY(-50%); /* 垂直居中 */
  width: 36rpx; /* 电池盖的宽度 */
  height: 80rpx; /* 电池盖的高度 */
  border: 6rpx solid #3ed1fe;
  border-left: none;
  background-color: #e7e7e7; /* 电池的背景色 */
  border-radius: 6rpx; /* 电池盖的圆角 */
  animation: glowing 1.5s infinite ease-in-out; /* 动画效果：每 1.5 秒循环一次 */
}

.battery-level {
  width: 100%; /* 电量的宽度（可以根据需要动态改变） */
  height: 100%; /* 电池的高度 */
  background-color: #39c3ec; /* 电池充电时的颜色 */
  border-radius: 10rpx; /* 电池电量部分的圆角 */
}

</style>
